﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Admin</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/login.css" />
  </head>
  <body>
    <!-- 底部树 -->
    <div class="landscape"></div>
    <!-- 背景颜色 -->
    <div class="filter"></div>
    <!-- 粒子效果 -->
    <canvas id="canvas"></canvas>

    <div id="login">
      <!-- 猫头鹰控件 -->
      <div id="owl-login" class="login-owl">
        <div class="hand"></div>
        <div class="hand hand-r"></div>
        <div class="arms">
          <div class="arm"></div>
          <div class="arm arm-r"></div>
        </div>
      </div>
      <!-- 表单区域 -->
      <form>
        <h2>Admin Login</h2>
        <div class="username">
          <span class="iconfont icon-yonghuming"></span>
          <input type="text" name="username" placeholder="请输入用户名" />
          <span class="iconfont"></span>
        </div>
        <div class="pwd">
          <span class="iconfont icon-mima"></span>
          <input type="password" name="password" placeholder="请输入密码" />
          <span class="iconfont"></span>
        </div>
        <div class="btns">
          <a href="javascript:;" class="register">注册</a>
          <a href="javascript:;" class="login">登录</a>
        </div>
      </form>
    </div>

    <div id="register">
      <!-- 猫头鹰控件 -->
      <div id="owl-login" class="login-owl">
        <div class="hand"></div>
        <div class="hand hand-r"></div>
        <div class="arms">
          <div class="arm"></div>
          <div class="arm arm-r"></div>
        </div>
      </div>
      <!-- 表单区域 -->
      <form>
        <h2>Admin Register</h2>
        <div class="username">
          <span class="iconfont icon-yonghuming"></span>
          <input type="text" name="username" placeholder="请输入用户名" />
          <span class="iconfont icon-duihao"></span>
        </div>
        <div class="pwd">
          <span class="iconfont icon-mima"></span>
          <input type="password" name="password" placeholder="请输入密码" />
          <span class="iconfont icon-duihao"></span>
        </div>
        <div class="btns">
          <a href="javascript:;" class="register">返回登录</a>
          <a href="javascript:;" class="login">注册</a>
        </div>
      </form>
    </div>

    <script src="./js/canvas.js"></script>
    <script src="./js/login.js"></script>
    <script>
      const username = document.querySelector('[name="username"]')
      const span1= username.nextElementSibling
      const password = document.querySelector('[ name="password"]')
      const span2= password.nextElementSibling

      const login = document.querySelector('.login');

      username.addEventListener('change',verifyUserName)
      function verifyUserName() {
        const reg = /^[\u4e00-\u9fa5]{3,10}$/
        if(!reg.test(username.value)){
          span1.classList.add('icon-chahao')
        }else{
          span1.classList.add('icon-duihao')
        }
      }

      password.addEventListener('change',verifyPassword)
      function verifyPassword() {
        const reg1 = /^[a-zA-Z0-9-+_]{5,16}$/
        if(!reg1.test(password.value)){
          span2.classList.add('icon-chahao')
        }else{
          span2.classList.add('icon-duihao')
        }
      }
      
      login.addEventListener('click', function () {
        localStorage.setItem('username',username.value)
        location.href='./index.html'

      });
      
    </script>
  </body>
</html>
